<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form
      @submit="handleSubmit"
      :form="form"
    >
      <a-form-item
        label="版本号"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="['version',{rules: [{required: true, message: '请填写版本'}]}]"
        />
      </a-form-item>
      <a-form-item
        label="包名"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="['bundleId',{rules: [{required: true, message: '请填写包名'}]}]"
        />
      </a-form-item>
      <a-form-item
        label="版本说明"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-textarea
          :rows="4"
          v-decorator="['description',{rules: [{required: true, message: '请填写版本说明'}]}]"
        />
      </a-form-item>
      <a-form-item
        label="APP"
        extra="上传对应版本的apk"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-upload
          v-decorator="[
            'url',
            {
              valuePropName: 'fileList',
              getValueFromEvent: normFile,
              rules: [{required: true, message: '请填写版本说明'}]
            },
          ]"
          name="file"
          :disabled="isUpload"
          :headers="headers"
          action="/api/storage/upload"
        >
          <a-button> <a-icon type="upload" /> Click to upload </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { AddObj } from '@/api/app/version'
import Vue from 'vue'
import { ACCESS_TOKEN } from '../../../store/mutation-types'
export default {
  name: 'CreateApp',
  data () {
    return {
      form: this.$form.createForm(this),
      headers: {
        Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
      },
      isUpload: false
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {

          values.url = values.url[0].response.data.url

          AddObj(values).then(res => {
            this.$message.success('上传成功')
            this.$router.push({
              name: 'version'
            })
          }).catch(err => {
            this.$message.error(err.msg)
          })
        }
      })
    },
    normFile (e) {
      if (['uploading', 'done'].includes(e.file.status)) {
        this.isUpload = true
      } else if (['error', 'removed'].includes(e.file.status)) {
        this.isUpload = false
      }

      if (Array.isArray(e)) {
        return e
      }
      return e && e.fileList
    }
  }
}
</script>

<style scoped>
  .dropbox {
    height: 180px;
    line-height: 1.5;
  }
</style>
